<!-- 
svg
    - Scalable Vector Graphics，可缩放矢量图
    - 基于xml语法的图像格式，属于对图像的形状描述，本质是xml文本文件，体积小，无论缩放多少倍都不会失真
    - 其它图像格式是基于像素处理的，即二进制数据，会有失真问题
    - svg文件可直接插入网页中，成为dom树的一部分，然后利用js和css进行操作
    - 网站：阿里矢量图库
    - 绘制的矢量图，可以修改状态，例如：hover时改变状态；可以使用CSS3的特效，例如：过渡、转换、动画等

操作方式
    - 直接定义
        <svg>xxx</svg>
    - 标签引用
        img、embed、iframe、object
    - 样式引用
        background: url(icon.svg);
    - 链接引用
        <a href="icon.svg">链接</a>
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>初识SVG</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .mysvg {
                width: 200px;
                height: 200px;
                background: url(./icons/夜景.svg) no-repeat;
            }
        </style>
    </head>
    <body>
        <!-- 直接定义 -->
        <svg
            t="1665050426662"
            class="icon"
            viewBox="0 0 1026 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3548"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="200.390625"
            height="200">
            <path
                d="M716.8 2.048q67.584 27.648 124.416 74.24t97.28 106.496 63.488 131.072 23.04 148.992q0 68.608-17.92 132.096t-50.176 118.784-77.824 100.864-100.864 77.824-119.296 50.176-132.608 17.92q-77.824 0-148.992-22.528t-131.072-63.488-106.496-97.792-74.24-124.416q64.512 73.728 153.6 115.712t194.56 41.984q95.232 0 179.2-36.352t146.432-98.816 98.816-146.432 36.352-179.2q0-104.448-42.496-194.048t-115.2-153.088zM220.16 289.792l-89.088-86.016 122.88-18.432 54.272-110.592 55.296 110.592 122.88 18.432-89.088 86.016 21.504 122.88-110.592-58.368-109.568 58.368z"
                p-id="3549"></path>
        </svg>

        <!-- 标签引用 -->
        <img src="./icons/夜景.svg" alt="夜景" />
        <embed src="./icons/夜景.svg" type="image/svg+xml" />
        <object data="./icons/夜景.svg" type="image/svg+xml"></object>
        <iframe src="./icons/夜景.svg" frameborder="0" scrolling="no" width="200" height="200"></iframe>

        <!-- 样式引用 -->
        <div class="mysvg"></div>

        <!-- 链接引用 -->
        <a href="./icons/夜景.svg">链接</a>
    </body>
</html>
